import { useState, useRef } from 'react';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Button, Modal, Form } from 'antd';
import UserForm from './components/UserForm';
import { queryUserList } from '@/services/demo/UserController';
import { getUserList } from '@/services/api/user';
import dayjs from 'dayjs';

// import styles from './index.less';

const UserPage = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalData, setModalData] = useState();
  const actionRef = useRef();
  const userFormRef = useRef();

  const handleOk = () => {
    userFormRef.current.form?.submit();
    // setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
    setModalData();
  };

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      hideInSearch: true,
    },
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: '条数',
      dataIndex: 'num',
      valueType: 'text',
      hideInSearch: true,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      hideInSearch: true,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      width: 300,
      hideInSearch: true,
    },
    {
      title: '注册日期',
      dataIndex: 'createTime',
      valueType: 'dateTimeRange',
      search: {
        transform: (value) => ({ createdStar: value[0], createdEnd: value[1] }),
      },
      render: (t, row) => {
        return dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={() => {
              setIsModalOpen(true);
              setModalData(record);
            }}
          >
            修改
          </a>
        </>
      ),
    },
  ];
  return (
    <PageContainer ghost>
      <ProTable
        // headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={() => [
          <Button key="1" type="primary" onClick={() => setIsModalOpen(true)}>
            新建
          </Button>,
        ]}
        request={async (params) => {
          // const <param name="" value="" />
          const { current, pageSize, ...leftParams } = params;

          const { data, code } = await getUserList({
            ...leftParams,
            page: current,
            pageSize,
          });
          return {
            data: data?.list || [],
            success: code === 0,
            total: data?.total,
          };
        }}
        columns={columns}
      />
      <Modal
        title={modalData ? '修改用户' : '新增用户'}
        open={isModalOpen}
        onOk={handleOk}
        destroyOnClose
        onCancel={handleCancel}
      >
        <UserForm
          ref={userFormRef}
          data={modalData}
          onSuccess={() => {
            setIsModalOpen(false), actionRef.current.reload();
          }}
        ></UserForm>
      </Modal>
    </PageContainer>
  );
};

export default UserPage;
